Hook中有很多React的功能，useState是我們第一個入門hook，它的作用在於增加 React state 到 function component，很複雜的一句話，簡而言之就是變數發生變化，同步更新畫面中。

在使用Hook前，要先知道以下兩個規則

1. 只在最上層呼叫 Hook
2. 只在 React Function 中呼叫 Hook

詳細說明可以參考Hook的原則

知道規則後，來製作一個在 React function component 中呼叫 Hook的範例

step1 :

從React函式中取出useState

import {useState} from 'react';

step2 :

宣告一個新的 state 變數，我們叫他「number」; 宣告一個改變 state 的函式，稱他「setNum」。

React.useState(0)中的數字0為number初始值。

當要修改number時，需要透過setNum這個函式，不能直接指定新值給number變數

  const [number, setNum] = React.useState(0);

step3:

製作兩個按鈕，點擊讓number從0變成10或是-10。

當點擊add按鈕(onClick事件)，就觸發了setNum函式，number變數被+10，此時number變為10，在p中的number會自動變為10。

function App() {
  const [number, setNum] = React.useState(0);
  return (
    <>
      <p>The number is {number}</p>
      <button
        onClick={() => {
          setNum(number + 10);
        }}
      >
        add
      </button>
      <button
        onClick={() => {
          setNum(number - 10);
        }}
      >
        minus
      </button>
    </>
  );
}

實際畫面如連結

只要是希望某變數被改變時，React能做出對應改變的時候，就必須使用state變數，就像上方範例。